<template>
    <div class="home-swipe">
        <van-search v-model="search" placeholder="请输入搜索关键词" shape="round" @search="onSearch" @focus="onFocus"
            input-align="center" />
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in bannerData" :key="item.id">
                <!-- <img :src="item.picUrl" alert=""> -->
                <van-image :src="item.picUrl" lazy-load radius="10" />
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
    import { Toast } from 'vant'
    // import axios from "axios"
    export default {
        data() {
            return {
                search: '',
                bannerData: []
            };
        },
        methods: {
            getBanner() {
                this.$request('get', '/recommend/banner')
                    .then(res => {
                        // console.log(res)
                        if (res.result == 100) {
                            this.bannerData = res.data
                        }
                    })
            },
            onSearch(val) {
                Toast(val);
            },
            onFocus() {
                // Toast("搜索框获得焦点");
            },
        },
        created() {
            //页面还没哟渲染，目前还不了解网页中有哪些元素。。。获取“home-swipe”是不可以
            this.getBanner();//由于是网络请求，有延迟，所以不管getBanner方法中是否操作了template中的元素，都可以再次调用
        },
        mounted() {
            //页面已完成渲染，知道有哪些网页元素...获取“home-swipe”是可以的
            //this。getBanner();
        }
    }
</script>

<style scoped>
    /* .my-swipe .van-swipe-item img {
    width: 100%;
} */
</style>